<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: rgb(211, 219, 219);
        }
        
        .big {
            background-color: white;
            height: 700px;
            width: 1000px;
            position: relative;
            margin: 100px auto;
            box-sizing: border-box;
        }
        
        .c {
            color: white;
            font-size: 30px;
        }
        
        .biack {
            background-color: rgb(12, 3, 36);
            width: 350px;
            height: 650px;
            position: absolute;
            right: 170px;
            bottom: 80px;
            box-sizing: border-box;
            padding-left: 70px;
            padding-top: 150px;
        }
        
        .b {
            width: 190px;
            height: 80px;
            color: white;
            font-size: 10px;
        }
        
        .a {
            color: rgb(19, 226, 192);
            font-size: 12px;
            text-align: center;
        }
        
        .white {
            background-color: white;
            width: 100px;
            height: 40px;
            box-sizing: border-box;
            padding-top: 0.05px;
        }
        
        .hei {
            width: 350px;
            height: 350px;
            background-color: rgb(110, 112, 110);
            position: absolute;
            right: 325px;
            bottom: 150px;
            z-index: 1;
        }
        
        .d {
            color: rgb(228, 25, 184);
            font-size: 18px;
        }
        
        .yelly {
            width: 350px;
            height: 300px;
            background-color: rgb(241, 165, 114);
            position: absolute;
            right: 290px;
            bottom: -120px;
            box-sizing: border-box;
            padding-top: 50px;
            padding-left: 30px;
            z-index: 1;
        }
        
        .e {
            font-size: 10px;
            width: 170px;
            height: 10px;
        }
        
        .wenzi {
            width: 180px;
            height: 35px;
            background-color: rgb(241, 165, 114);
            border: 3px solid white;
            margin-top: 80px;
            box-sizing: border-box;
            padding-bottom: 5px;
        }
        
        .f {
            color: white;
            font-size: 5px;
            text-align: center;
        }
    </style>

</head>

<body>
    <div class="big">
        <div class="biack">
            <h1 class="c">美文分享</h1>
            <p class="b">“走远”，是一种生命的厚度，来去从容，悠悠而过，得失珍惜，失之坦然。 “任尔东南西北风，我自岿然不动”，不过须臾之间，都是天边的一抹夕阳，有阳光的金色之美，但没有了烈日炎炎的焦躁不安。

            </p>
            <div class="white">
                <p class="a">LEARN MORE</p>
                <div class="hei"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606724254317&di=9ccc7437821ed787ed9c5474ab8baed0&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F58f467b96eb45.jpg" alt="图片" width="350px" height="350px"></div>
                <div class="yelly">
                    <p class="d">《我在等你》余秋雨</p>
                    <p class="e">我藏不住秘密 也藏不住忧伤 正如我藏不住爱你的喜悦 藏不住分离时的彷徨 我就是这样坦然 你舍得伤 就伤
                    </p>
                    <div class="wenzi">
                        <p class="f">往后余生</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>